<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员中心 - AI 智享生活管家</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="../css/custom.css" rel="stylesheet">
</head>
<body class="bg-gray-50">
    <!-- 状态栏 -->
    <div class="status-bar">
        <img src="../images/status-bar.png" alt="状态栏" class="w-full h-full object-cover">
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
        <!-- 顶部导航 -->
        <nav class="px-4 py-2 flex items-center border-b">
            <a href="profile.html" class="text-gray-600">
                <i class="fas fa-chevron-left text-xl"></i>
            </a>
            <h1 class="flex-1 text-center font-semibold">会员中心</h1>
        </nav>

        <!-- 会员卡片 -->
        <div class="p-4">
            <div class="bg-gradient-to-r from-blue-500 to-purple-500 rounded-xl p-6 text-white">
                <div class="flex items-center justify-between mb-6">
                    <div>
                        <h2 class="text-2xl font-semibold">普通会员</h2>
                        <p class="mt-1 opacity-90">有效期至 2024-12-31</p>
                    </div>
                    <i class="fas fa-crown text-3xl text-yellow-300"></i>
                </div>
                <div class="flex justify-between items-center">
                    <div>
                        <p class="text-sm opacity-90">剩余天数</p>
                        <p class="text-xl font-semibold mt-1">266天</p>
                    </div>
                    <button class="bg-white text-blue-500 px-4 py-2 rounded-full text-sm font-medium">
                        续费会员
                    </button>
                </div>
            </div>
        </div>

        <!-- 会员权益 -->
        <section class="px-4 mt-4">
            <h3 class="text-lg font-semibold mb-4">会员特权</h3>
            <div class="grid grid-cols-2 gap-4">
                <div class="bg-white p-4 rounded-xl">
                    <i class="fas fa-tools text-blue-500 text-xl mb-2"></i>
                    <h4 class="font-medium">高级功能</h4>
                    <p class="text-sm text-gray-500 mt-1">解锁全部高级功能</p>
                </div>
                <div class="bg-white p-4 rounded-xl">
                    <i class="fas fa-ad text-green-500 text-xl mb-2"></i>
                    <h4 class="font-medium">无广告</h4>
                    <p class="text-sm text-gray-500 mt-1">去除所有广告</p>
                </div>
                <div class="bg-white p-4 rounded-xl">
                    <i class="fas fa-cloud-upload-alt text-purple-500 text-xl mb-2"></i>
                    <h4 class="font-medium">云存储</h4>
                    <p class="text-sm text-gray-500 mt-1">10GB云存储空间</p>
                </div>
                <div class="bg-white p-4 rounded-xl">
                    <i class="fas fa-headset text-orange-500 text-xl mb-2"></i>
                    <h4 class="font-medium">专属客服</h4>
                    <p class="text-sm text-gray-500 mt-1">优先响应服务</p>
                </div>
            </div>
        </section>

        <!-- 会员套餐 -->
        <section class="px-4 mt-6">
            <h3 class="text-lg font-semibold mb-4">开通会员</h3>
            <div class="space-y-4">
                <div class="bg-white p-4 rounded-xl border-2 border-blue-500">
                    <div class="flex justify-between items-center">
                        <div>
                            <h4 class="font-medium">年度会员</h4>
                            <p class="text-sm text-gray-500 mt-1">¥365/年</p>
                        </div>
                        <div class="bg-blue-50 text-blue-500 px-3 py-1 rounded-full text-sm">
                            推荐
                        </div>
                    </div>
                </div>
                <div class="bg-white p-4 rounded-xl">
                    <div class="flex justify-between items-center">
                        <div>
                            <h4 class="font-medium">季度会员</h4>
                            <p class="text-sm text-gray-500 mt-1">¥108/季</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white p-4 rounded-xl">
                    <div class="flex justify-between items-center">
                        <div>
                            <h4 class="font-medium">月度会员</h4>
                            <p class="text-sm text-gray-500 mt-1">¥38/月</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</body>
</html> 
